<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on 事件绑定 实例练习</title>
    <script type="text/javascript" src="../assets/vue.js"></script>

</head>
<body>

<div id="app">
    <h3> {{message}}</h3>
    <hr>
    <div>
        <p>本场比赛得分：{{score}}</p>
        <button type="button" v-on:click="add_score">加分</button>
        <button type="button" @click="del_score">减分</button>
        <p>
            <input type="text" v-model="score2" v-on:keyup.enter="other_score">

        </p>
    </div>
</div>

<script>
    //v-on  的 简写 方式 @ + 事件 = “绑定到 函数 ”

    var data = {
        message:"v-on 事件绑定 实例练习",
        score:0,
        score2:0
    };

    var app = new Vue({
        el:'#app',
        data:data,
        methods:{
            add_score:function () {
                this.score++ ;
            },
            del_score:function () {
                this.score-- ;
            },
            other_score:function () {
                this.score = parseInt(this.score) + parseInt(this.score2)  ;
            }
        }
    });

</script>

</body>
</html>